<template>
  <div>
    <el-card>
      <div slot="header">
        <span>添加账号</span>
      </div>
      <template>
        <el-table
          ref="tableRef"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- 账号 -->
          <el-table-column prop="account" label="账号"></el-table-column>
          <!-- 用户组 -->
          <el-table-column
            prop="userGroup"
            label="用户组"
            show-overflow-tooltip
          ></el-table-column>
          <!-- 日期 -->
          <el-table-column label="日期">
            <template slot-scope="scope">
              {{ scope.row.ctime | formatYMD }}
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">
                编辑
              </el-button>

              <!-- 删除小气泡 -->
              <el-popconfirm
                @confirm="handleDelete(scope.row)"
                title="这是一段内容确定删除吗？"
                style="margin-left: 10px"
              >
                <el-button slot="reference" size="mini" type="danger">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
          <div style="margin-top: 20px">
            <el-button @click="handleBatchDel" type="danger">
              批量删除
            </el-button>
            <el-button @click="cancelChange" type="primary">取消选择</el-button>
          </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
          <el-form
            class="form"
            size="small"
            label-width="80px"
            :model="formData"
          >
            <el-form-item label="用户名">
              <el-input
                v-model="formData.account"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户组">
              <el-select
                v-model="formData.userGroup"
                placeholder="请选择用户组"
              >
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通用户" value="普通用户"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible = false">
              取 消
            </el-button>
            <el-button size="small" type="primary" @click="handleConfirm">
              确 定
            </el-button>
          </div>
        </el-dialog>
      </template>
    </el-card>
  </div>
</template>

<script>
//解构接口
import {
  getUserListReq,
  delUserReq,
  editUserReq,
  batchDelUserReq,
} from '@/api/user'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      ids: [], //id组成的数组
      // 总条数
      total: 0,
      currentPage: 1,
      pageSize: 3,
      dialogFormVisible: false, //编辑弹窗隐藏显示
      //弹窗数据
      formData: {
        id: '',
        account: '',
        userGroup: '',
      },
    }
  },

  methods: {
    //获取数据函数
    async getData() {
      //提取数据
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      //发送请求
      let res = await getUserListReq({
        currentPage,
        pageSize,
      })
      //解构数据
      let {data, total} = res.data
      //数据赋值
      this.total = total
      this.tableData = data

      //如果当前data为[空数据] &&当前页不等于1  那么页数自动-1（也就是返回当上一页）
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },

    handleSelectionChange(val) {
      //console.log('val :>> ', val)
      this.ids = val.map(v => v.id)
      // console.log('ids :>> ', this.ids)
    },
    // 编辑操作
    async handleEdit(row) {
      //开启弹窗
      this.dialogFormVisible = true
      //数据回填  数据需要拷贝  为了数据拓邦
      this.formData = {...row}
    },
    // 编辑弹窗操作
    async handleConfirm() {
      //发送请求
      let res = await editUserReq(this.formData)
      //解构数据
      let {code, msg} = res.data
      //判断
      if (code === 0) {
        // 重新发请求
        this.getData()
        //修改成功后   弹窗消失
        this.dialogFormVisible = false
      }
    },
    //删除用户
    async handleDelete(row) {
      //获取id
      let {id} = row
      //发送请求
      let res = await delUserReq({id})
      // 结构数据
      let {code, msg} = res.data
      // 判断
      if (code === 0) {
        // 拉取数据
        this.getData()
      }
    },

    //批量删除按钮
    handleBatchDel() {
      this.$confirm('此操作将永久删除选中用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          //发送请求
          let res = await batchDelUserReq({ids: this.ids})
          //结构数据
          let {code, msg} = res.data
          //判断
          if (code === 0) {
            //重新拉取数据
            this.getData()
            this.$message.success(msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //取消选择
    cancelChange() {
      if (this.ids.length) {
        this.$refs.tableRef.clearSelection()
        this.$message.success('取消成功')
      } else {
        this.$message.success('没有选中')
      }
    },
    //改变页码
    handleSizeChange(val) {
      //页码
      //拿到当前每条页面条数  赋值给pageSize
      this.pageSize = val
      //2 拉取数据
      this.getData()
    },
    //改变当前页
    handleCurrentChange(val) {
      //1.赋值给currentPage
      this.currentPage = val
      //2 拉取数据
      this.getData()
    },
  },
  //生命周期  初始化发请求
  created() {
    //初始化发送请求
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.el-pager {
  li {
    .active {
      color: rgba(255, 162, 3) !important;
    }
  }
}
.form {
  width: 270px;
}
</style>
